import { DownCircleOutlined, UpCircleOutlined } from '@ant-design/icons';
import { useState } from 'react';
import styles from './style.less';

interface IConfigGroupProps {
  id: string;
  title: string;
}

const ConfigGroup: React.FC<IConfigGroupProps> = ({ id, title, children }) => {
  const [retract, setRetract] = useState<boolean>(false);
  const handleControlRetract = () => {
    setRetract(!retract);
  };
  return (
    <div className={styles['config-item-wrap']}>
      <div className={styles['config-item-title']}>
        <div id={id}>{title}</div>
        <div onClick={handleControlRetract} className={styles['config-item-collsep']}>
          {retract ? (
            <span>
              展开 <DownCircleOutlined />
            </span>
          ) : (
            <span>
              收起 <UpCircleOutlined />
            </span>
          )}
        </div>
      </div>
      {!retract && children}
    </div>
  );
};

export default ConfigGroup;
